<!DOCTYPE html>
<html>

<head>
    <title>测试地址保存</title>
    <script src="js/vue-2.5.16.js"></script>
    <script src="js/axios-0.18.0.min.js"></script>
    <script src="js/host.js"></script>
</head>

<body>
    <div id="test">
        <h2>测试地址保存</h2>
        <button @click="test_save">测试保存地址</button>
        <div v-if="result">
            <h3>结果：</h3>
            <pre>{{ result }}</pre>
        </div>
    </div>

    <script>
        new Vue({
            el: '#test',
            data: {
                result: ''
            },
            methods: {
                test_save: function () {
                    var test_data = {
                        receiver: '测试用户',
                        place: '测试地址详细地址',
                        mobile: '13800138000',
                        province_id: 1,
                        city_id: 1,
                        district_id: 1,
                        title: '测试用户'
                    };

                    console.log('测试数据：', test_data);
                    console.log('host地址：', host);

                    var url = host + '/addresses/create/';
                    console.log('请求URL：', url);

                    var self = this;

                    axios.post(url, test_data, {
                        responseType: 'json',
                        withCredentials: true,
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                        .then(response => {
                            console.log('成功响应：', response);
                            self.result = '成功：' + JSON.stringify(response.data, null, 2);
                        })
                        .catch(error => {
                            console.log('错误详情：', error);
                            self.result = '错误：' + JSON.stringify({
                                message: error.message,
                                response: error.response ? {
                                    status: error.response.status,
                                    data: error.response.data
                                } : '无响应',
                                request: error.request ? '请求已发送' : '无请求'
                            }, null, 2);
                        });
                }
            }
        });
    </script>
</body>

</html>